Element UI-[Table] 欄位文字太長解決方式

element-ui vue.js vue學習筆記

LucyLiou 2019-03-14 11:25:32 ‧ 7585 瀏覽

遇到問題

上班時會遇到一些小問題，也透過這樣一點一滴的把自己學的分享給大家，如果有誤歡迎大家指正

欄位裡面文字過長

一般如果沒有使用 element ui 的話可以使用以下程式碼

span {
  display : inline-block;
  overflow : hidden;
  text-overflow : ellipsis;
  white-space : nowrap;
  width : 240px;
}

如果是使用 element ui 可使用以下程式碼；以下程式碼可以把文字的內容超過的部分都隱藏，hover的時候會以tooltip呈現出來完整文章

<el-table-column show-overflow-tooltip></el-table-column>

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22203 篇

完賽人數

602 人

IT邦幫忙